<template>
  <div>
    <el-dialog title="设置账号" :visible.sync="accountPage" width="650px">


      <el-form ref="form" :inline="true" :model="accInfo" :rules="accInfoRules" size="small"
               label-width="80px">
        <el-form-item label="员工姓名">
          <el-input readonly :disabled="true" v-model="accInfo.name" style="width: 178px;"></el-input>
        </el-form-item>

        <el-form-item label="手机">
          <el-input readonly :disabled="true" v-model="accInfo.phone" style="width: 178px;"></el-input>
        </el-form-item>

        <el-form-item label="所在部门">
          <el-input readonly :disabled="true" v-model="accInfo.deptName" style="width: 178px;"></el-input>
        </el-form-item>

        <!--<el-form-item label="职务">
            <el-select  :disabled="true" v-model="accInfo.postId" multiple placeholder="请选择">
              <el-option
                v-for="item in postOptions"
                :key="item.postId"
                :label="item.postName"
                :value="item.postId"
                :disabled="item.status == 1"
              ></el-option>
            </el-select>
          </el-form-item>-->

        <el-form-item label="职务">
          <el-input readonly :disabled="true" v-model="accInfo.postName" style="width: 178px;"></el-input>
        </el-form-item>

        <el-form-item label="账号名称" prop="userName">
          <el-input :disabled="hasAccount" v-model="accInfo.userName" style="width: 178px;"></el-input>
        </el-form-item>

        <!--
          作者：admin
          时间：2020-02-02  v-if="!hasAccount"
          描述：没有账号才显示密码框，允许他填写登录密码
        -->
        <el-form-item v-if="!hasAccount" label="账号密码" prop="password">
          <el-input v-model="accInfo.password" style="width: 178px;"></el-input>
        </el-form-item>


        <el-form-item label="角色">
          <el-select v-model="accInfo.roleIds" multiple placeholder="请选择">
            <el-option
              v-for="item in roleOptions"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
              :disabled="item.status == 1"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注">
          <el-input v-model="accInfo.remark" style="width: 178px;"></el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="success" @click="saveAccount">确认</el-button>
        <el-button @click="accountPage = false">取消</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
  //加入账户的相关方法
  import {
    listUser,
    getUser,
    delUser,
    addUser,
    updateUser,
    exportUser,
    resetUserPwd,
    changeUserStatus,
    importTemplate
  } from '@/api/system/user'

  export default {
    name: 'RecordAccount',
    mixins: [],
    components: {},
    data() {
      return {
        accountPage: false,
        accInfo: {},
        postOptions: [], // 职务选项
        roleOptions: [], // 角色选项
        hasAccount: false, // 当前员工是否已有登录账号
        accInfoRules: {
          userName: [
            { required: true, message: '账号名称不能为空', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '账号密码不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    props: {
      initParams: { // 初始参数
        type: Object,
        required: true,
        default() {
          return {}
        }
      },
      searchParams: { // 搜索参数
        type: Object,
        required: true,
        default() {
          return {}
        }
      },
      departmentAllListData: { // 下拉的部门列表
        type: Array,
        required: true,
        default() {
          return []
        }
      }
    },
    computed: {},
    methods: {
      handleAccount() {

        //回到账号管理页面，把id带回去
        this.$router.push({
          name: 'User',
          query: {
            id: this.tableSelectedData[0].id
          }
        })

        return
        this.accountPage = true
        //console.log(this.tableSelectedData[0])
        this.accInfo = {}

        //根据员工编号查询账号数据
        getUser(this.tableSelectedData[0].id).then(response => {
          this.postOptions = response.posts
          this.roleOptions = response.roles

          this.title = '设置为登录账号'

          //console.log(response)

          //填充列表的数据（不包含账号数据）
          this.accInfo = this.tableSelectedData[0]
          console.log(this.accInfo)
          if (response.data) {

            //踩坑：这些代码不能放在下面，否则会出现bug
            this.hasAccount = true
            this.accInfo = { ...this.accInfo, ...response.data }
            this.accInfo.postIds = response.postIds
            this.accInfo.roleIds = response.roleIds

            //因为密码是加密的，所以这边直接给清空
            //建议去账号管理修改密码
            this.accInfo.password = ''
          } else {
            this.accInfo.userId = this.accInfo.id //后台要开账户，user_id就是员工编号
            this.hasAccount = false
          }

        })

      },
      saveAccount() {
        console.log(this.accInfo)

        this.$refs['form'].validate(valid => {
          if (valid) {
            if (this.accInfo.id != undefined) {

              let query = {
                name: this.accInfo.name,
                phone: this.accInfo.phone,
                deptName: this.accInfo.deptName,
                postIds: this.accInfo.postIds,
                userName: this.accInfo.userName,
                roleIds: this.accInfo.roleIds,
                remark: this.accInfo.remark,
                id: this.accInfo.id,
                userId: this.accInfo.userId

              }

              if (!this.hasAccount) {
                query.password = this.accInfo.password
              }

              addUser(query).then(response => {
                if (response.code === 200) {
                  this.msgSuccess('新增成功')
                  this.accountPage = false
                } else {
                  this.msgError(response.msg)
                }
              })
            }
          }
        })

      },
      async initData() { // 初始化数据
      }
    },
    watch: {
      searchParams: {
        handler: function(newVal, oldVal) {
          if (JSON.stringify(newVal) !== JSON.stringify(this.searchKey)) {
            this.searchKey = JSON.parse(JSON.stringify(newVal))
          }
        },
        deep: true,
        immediate: true
      },
      deptName(val) { // 根据名称筛选部门树
        this.$refs.tree.filter(val)
      }
    },
    created() {
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>

</style>
